<template>
    <div class="admin">
        <Crumb></Crumb>
        <div class="admin-in">
            <div class="seach">
                <div class="sx">
                    <div> <el-icon style="vertical-align: middle">
                            <Search />
                        </el-icon> <span>筛选搜索</span> </div>
                    <div> <el-button>重置</el-button>
                        <el-button type="primary">查询搜索</el-button>
                    </div>
                </div>
                <div class="user">角色名称: <el-input class="inp" v-model="input" placeholder="请输入角色名称" /></div>
            </div>
            <div class="sj">
                <div class="sj-in">
                    <div><el-icon style="vertical-align: middle">
                            <Tickets />
                        </el-icon>数据列表
                    </div>
                    <el-button type="primary">添加</el-button>
                </div>
            </div>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="编号" width="60px" />
                <el-table-column prop="name" label="角色名称" />
                <el-table-column prop="description" label="描述" />
                <el-table-column prop="adminCount" label="用户数" />
                <el-table-column label="添加时间">
                    <template #default="{ row }">
                        {{ dayjs(row.createTime).format('YYYY/MM/DD HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column label="是否启用">
                    <template #default="scope">
                        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" />
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default>
                        <el-button link type="primary" size="small">分配菜单</el-button>
                        <el-button link type="primary" size="small">分配资源</el-button>
                        <el-button link type="primary" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="pageparams.currentPage" v-model:page-size="pageparams.pageSize"
                :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pageparams.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup lang="ts">
import Crumb from "@/components/Crumb.vue"
import { Search, Tickets } from '@element-plus/icons-vue'
import { dayjs } from 'element-plus'
import * as http from "@/request/http"
import { useTable } from "@/hooks/useTables"
import { ref } from "vue"
const { tableData, pageparams, handleSizeChange, handleCurrentChange } = useTable(http.admin.roleHttp, {})
const input = ref()
</script>

<style lang="scss" scoped>
.admin {
    width: 100%;

    .admin-in {
        width: 97%;
        margin: auto;

        .seach {
            margin: 30px 0 20px 0;
            box-shadow: 0 0 5px 1px var(--el-input-border-color, var(--el-border-color));
            border-radius: 3px;
            color: #737478;
        }

        .sj {
            box-shadow: 0 0 5px 1px var(--el-input-border-color, var(--el-border-color));
            margin: 10px 0 20px 0;
            line-height: 60px;
            border-radius: 3px;
            color: #737478;

            .sj-in {
                width: 97%;
                margin: auto;
                display: flex;
                justify-content: space-between;
            }

            :deep(.el-button) {
                margin-top: 15px;
            }
        }

        .sx {
            width: 97%;
            margin: auto;
            display: flex;
            justify-content: space-between;
            line-height: 60px;

        }

        .user {
            margin-left: 60px;
            padding-bottom: 20px;
        }
    }
}

:deep(.el-table__cell) {
    text-align: center;
}

:deep(.inp) {
    width: 220px;
}

:deep(.el-input__wrapper) {
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
}

:deep(.el-breadcrumb) {
    line-height: 40px;
    padding-left: 19px;
    border-bottom: 1px solid #eeee;
    // border: 1px solid #000;
}
</style>